<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="jeDate/skin/jedate.css">
    <style>
        html,
        body {
            height: 100%;
        }
        
        #template {
            display: none;
        }
        
        #mask {
            position: fixed;
            background-color: #ccc;
            width: 300px;
            height: 250px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
            padding-left: 10px;
        }
        
        #popup p {
            line-height: 42px;
        }
        
        #popup {
            width: 550px;
            height: 500px;
            padding: 30px;
            background-color: #ccc;
            border-radius: 20px;
            z-index: 1;
            transform: translate(-50%, -50%);
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: auto;
        }
        
        #popup1 p {
            line-height: 42px;
        }
        
        #popup1 {
            width: 550px;
            padding: 30px;
            background-color: #ccc;
            border-radius: 20px;
            position: fixed;
            top: 50%;
            z-index: 1;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
        
        .nav li {
            float: left;
            list-style: none;
        }
        
        #chart {
            position: absolute;
            width: 550px;
            height: 490px;
        }
        
        #mask p {
            display: inline-block;
        }
        
        .cha:hover {
            cursor: pointer;
            transform: rotate(90deg);
            transition: 1s;
        }
        
        .caozuo {
            width: 500px;
        }
    </style>
</head>

<body>
    <div style="height: 60px;">
        <h2 style="float:left;margin-top: 15px;margin-left: 15px;">欢迎 <span style="color: brown;font-size: 25px;" id="nicheng">aaa</span> 登录</h2>
        <a href="http://10.35.165.16" style="margin-left: 15px;margin-top: 27px;float: left;" id="tuichu">退出登录</a>
        <button class="btn btn-primary" id="popupshow" style="float:right;margin-top: 15px;margin-right: 15px;">+添加成绩</button>
    </div>
    <ul class="nav">

        <li><a href="/xue.html">学生管理</a></li>
        <li><a href="/score.html">成绩管理</a></li>
    </ul>
    <div class="form-inline">
        <div class="form-group">
            <select class="form-control subject">
            
            </select>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="name" placeholder="学生姓名">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="date" placeholder="日期">
        </div>
        <button class="btn btn-primary" id="query">查询</button>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>时间</th>
                <th class="caozuo">操作</th>
            </tr>
        </thead>
        <tbody class="tbody1">
        </tbody>
        <tr id="template">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <button class="btn btn-danger shanchuxueyuan">成绩集合</button>
                <button class="btn btn-primary xiugaixinxi">修改成绩</button>
                <button class="btn btn-success shanchuchengji">删除成绩</button>
            </td>
        </tr>
    </table>



    <div id="popup">
        <div id="chart">
        </div>
        <span style="position: absolute;right: 10px;top: 10px;margin: auto;font-size: 20px;display: none;" class="cha">×</span>
    </div>
    <div id="mask">
        <span style="position: absolute;right: 10px;top: 10px;margin: auto;font-size: 20px;" class="cha">×</span>
        <span>id：</span>
        <p></p><br>
        <span>姓名：</span>
        <p></p><br>
        <span>科目：</span>
        <p></p><br>
        <span>分数：</span>
        <p></p><br>
        <span>录入时间：</span>
        <p></p><br>
        <span>修改分数</span>
        <input type="text" id="gaifen">
        <button type="submit" class="btn btn-primary" id="send" style="margin-top: 20px;">确认修改</button>
    </div>
    <div id="popup1">
        <div class="form-group">
            <label for="newName">学生ID</label>
            <select class="form-control xueid">
            
            </select>
        </div>
        <div class="form-group">
            <label for="newName">科目</label>
            <input type="text" class="form-control" id="newKEMU" placeholder="请输入科目">
        </div>
        <div class="form-group">
            <label for="newAge">分数</label>
            <input type="number" class="form-control" id="newFENSHU" placeholder="请输入学生分数">
        </div>
        <div class="form-group">
            <label for="newAge">时间</label>
            <input type="text" class="form-control" id="newSHIJIAN" placeholder="选择时间">
        </div>

        <button type="submit" class="btn btn-primary" id="send1">确认添加</button>
        <button type="submit" class="btn btn-danger" id="xiao1" style="margin-left: 100px;">取消操作</button>
    </div>
</body>
<script src="citys.js"></script>
<script src="jquery.min.js"></script>
<script src="echarts.min.js"></script>
<script src="jeDate/dist/jedate.min.js"></script>
<script>
    let denglule = sessionStorage.getItem("denglule");
    let yonghu = localStorage.getItem("yonghu");
    if (!denglule) {
        window.location.href = url
    } else {
        $("#nicheng").html(yonghu + "：" + denglule)
    }
    $("#tuichu").click(function() {
        sessionStorage.clear()
    })
    $.ajax({
        url: `${url}/getScore`,
        success(data) {
            lie(data)
            let a = JSON.parse(data)
            let b = a.map(item => {
                return item.kemu
            })
            $(".subject").append($("<option>全部科目</option>"))
            unique(b).forEach(item => {
                let b = $(`<option>${item}</option>`)
                $(".subject").append(b)
            })
        }
    })
    $("#query").click(function() {
        $.ajax({
            url: `${url}/getScore`,
            data: {
                name: $("#name").val(),
                date: $("#date").val(),
                kemu: $(".subject").find("option:selected").html()
            },
            success(data) {
                if ($("#name").val() && !$("#date").val() && $(".subject").find("option:selected").html() && $(".subject").find("option:selected").html() != "全部科目") {
                    $("#popup").fadeIn()
                    $(".cha").fadeIn()
                    let a = JSON.parse(data)
                    let arr = a.map(function(item) {
                        return item.time
                    })
                    let arr1 = a.map(function(item) {
                        return item.fenshu
                    })
                    echarts.init(document.getElementById('chart')).setOption({
                        title: {
                            text: `${$("#name").val()}全部 ${$(".subject").find("option:selected").html()} 成绩`
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: arr
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: arr1,
                            type: 'line'
                        }]
                    })
                }
                $(".tbody1").html("")
                lie(data)
            }
        })
    })
    $(document).keydown(function(e) {
        if (e.keyCode === 13) {
            $("#query").click()
            $(".subject")[0].blur()
        }

    })

    function lie(data) {
        let a = JSON.parse(data)
        a.forEach(item => {
            let b = $("#template").clone(true)
            b.show()
            $(".tbody1").append(b)
            b.find("td").eq(0).html(item.id)
            b.find("td").eq(1).html(item.name)
            b.find("td").eq(2).html(item.kemu)
            b.find("td").eq(3).html(item.fenshu)
            b.find("td").eq(4).html(item.time)
        })
    }

    function unique(arr) {
        return Array.from(new Set(arr))
    }
    $(".shanchuxueyuan").click(function(e) {
        $("#popup").fadeIn()
        $(".cha").fadeIn()
        $.ajax({
            url: `${url}/getScore1`,
            data: {
                name: $(e.target).closest("tr").find("td").eq(1).html(),
                id: $(e.target).closest("tr").find("td").eq(0).html()
            },
            success(data) {
                let a = JSON.parse(data)
                let arr = a.map(function(item) {
                    return item.kemu
                })
                let arr1 = a.map(function(item) {
                    return item.fenshu
                })
                echarts.init(document.getElementById('chart')).setOption({
                    title: {
                        text: `${$(e.target).closest("tr").find("td").eq(1).html()}全科成绩`
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: arr
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: arr1,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                })
            }
        })


    })
    $(".xiugaixinxi").click(function(e) {
        $("#mask").fadeIn();
        $("#mask").find("p").eq(0).html($(e.target).closest("tr").find("td").eq(0).html())
        $("#mask").find("p").eq(1).html($(e.target).closest("tr").find("td").eq(1).html())
        $("#mask").find("p").eq(2).html($(e.target).closest("tr").find("td").eq(2).html())
        $("#mask").find("p").eq(3).html($(e.target).closest("tr").find("td").eq(3).html())
        $("#mask").find("p").eq(4).html($(e.target).closest("tr").find("td").eq(4).html())

    })
    $("#send").click(function(e) {
        $.ajax({
            url: `${url}/gaiScore`,
            data: {
                id: $(e.target).closest("#mask").find("p").eq(0).html(),
                kemu: $(e.target).closest("#mask").find("p").eq(2).html(),
                date: $(e.target).closest("#mask").find("p").eq(4).html(),
                fenshu: $("#gaifen").val()
            },
            success(data) {
                if (data == "成功") {
                    $("#mask").fadeOut();
                    history.go(0)
                }
            }
        })
    })
    $(".cha").click(function() {
        $("#popup").fadeOut()
        $("#mask").fadeOut();
    })
    $("#xiao1").click(function() {
        $("#popup1").fadeOut()
    })
    $("#send1").click(function() {

        $.ajax({
            url: `${url}/addScore`,
            data: {
                id: $(".xueid").find("option:selected").html(),
                kemu: $("#newKEMU").val(),
                fenshu: $("#newFENSHU").val(),
                shijian: $("#newSHIJIAN").val(),
            },
            success(data) {
                if (data == "成功") {
                    $("#popup1").fadeOut()
                    history.go(0)
                }
            }
        })
    })
    $("#popupshow").click(function() {
        $("#popup1").fadeIn()
        $.ajax({
            dataType: "jsonp",
            url: `${url}/getData`,
            success(data) {

                let a = data
                console.log(a)
                let b = a.map(item => {
                    return item.id
                })
                $(".xueid").empty()
                unique(b).forEach(item => {
                    let b = $(`<option>${item}</option>`)
                    $(".xueid").append(b)
                })
            }
        })
    })

    $(".shanchuchengji").click(function(e) {
        $.ajax({
            url: `${url}/shanScore`,
            data: {
                id: $(e.target).closest("tr").find("td").eq(0).html(),
                kemu: $(e.target).closest("tr").find("td").eq(2).html(),
                chengji: $(e.target).closest("tr").find("td").eq(3).html(),
                shijian: $(e.target).closest("tr").find("td").eq(4).html(),
            },
            success(data) {
                if (data == "成功") {
                    history.go(0)
                }
            }
        })
    })
    jeDate('#date', {
        minDate: '1990-01-01',
        // isinitVal: true,     //进入自动给时间
        format: 'YYYY-MM-DD',
        onClose: false, //天点击会自动选择，不用点确定
    });
    jeDate('#newSHIJIAN', {
        minDate: '1990-01-01',
        isinitVal: true, //进入自动给时间
        format: 'YYYY-MM-DD',
        onClose: false, //天点击会自动选择，不用点确定
    });
</script>

</html>